import React, { useState, useEffect } from 'react'
import { useNavigate, useLocation } from 'react-router-dom'
import styles from './index.module.less'
import { useDispatch, useSelector } from 'react-redux'
import { RootState } from '@/store'
import { handleChangeMenuVisible } from '@/store/models/app'
import { getStorageItem } from '@/utils'
import { Button } from 'antd'
import { CaretDownOutlined, CaretUpOutlined } from '@ant-design/icons'

const Side = ({ routerConfig }: any) => {
  const { menuVisible } = useSelector((state: RootState) => state.app)

  const location = useLocation()
  const navigate = useNavigate()
  const dispatch = useDispatch()
  const [pageValidRouters, setPageValidRouters] = useState<any>([])

  useEffect(() => {
    setPageValidRouters(routerConfig)
  }, [routerConfig])

  return (
    <div className={styles.side_menu}>
      {
        pageValidRouters.map((item: any) => {
          return <div className={`${styles.side_menu_item} ${location.pathname.indexOf(item.path) !== -1 ? styles.menu_active_item : ''}`} onClick={() => {
            navigate(item.path)
            !menuVisible && dispatch(handleChangeMenuVisible(true))
          }}>
            <i className={`iconfont ${item.icon}`} />
            <span className={styles.side_popover}>{item.name}</span>
            {
              location.pathname.indexOf(item.path) !== -1 ? <div className={styles.checked}></div> : null
            }
          </div>
        })
      }
    </div>
  )
}
export default Side
